import React, { Component } from 'react';
import { Input, Space, List, Avatar, Image } from 'antd';
import { connect } from 'umi';
import styles from './list.less';
import * as service from '../utils/request'

import { SearchOutlined, FolderOutlined, FileOutlined, UserOutlined, SettingOutlined } from '@ant-design/icons';

@connect(({ listModel }) => ({ listModel }))
class Index extends Component {

    constructor(props) {
        super(props);
        this.state = {

        };

    }



    componentDidMount() {
    }


    doRunPluginByBackend = (plugin) => {
        this.props.dispatch({ type: "listModel/doRunPluginByBackend", payload: { plugin: plugin } })
    }





    render() {

        return (
            <div>
                {this.props.listModel.searchResult.length > 0 ? (
                    <List
                        className={styles.listContain}
                        dataSource={this.props.listModel.searchResult}
                        id="searchList"
                        renderItem={(item, i) => (
                            <List.Item
                                key={i}
                                className={this.props.listModel.cursor === i ? styles.listStyle4Selected : styles.listStyle}
                                onClick={() => this.doRunPluginByBackend(item)}
                                extra={
                                    <div className={styles.pluginNameLable}>
                                        {item.pluginName}
                                    </div>
                                }


                            >
                                <List.Item.Meta
                                    avatar={
                                        <div>
                                            <div className={styles.imgbox} data-text="1">
                                                {item.featureIcon ?
                                                    (<Image className={styles.listIcon} src={item.featureIcon.replace("%20", " ")} />) :
                                                    (<SettingOutlined className={styles.listIcon} style={{ fontSize: 40, color: '#6b6c6c' }} />)
                                                }
                                            </div>
                                        </div>
                                    }
                                    title={<div className={styles.titleLable}>{(item.featureName.length > 30 ? item.featureName.slice(0, 30) + "..." : item.featureName)}</div>}
                                    description={<div className={styles.descLable}>{item.featureDesc.length > 80 ? item.featureDesc.slice(0, 80) + "..." : item.featureDesc}</div>}
                                />

                            </List.Item>
                        )
                        }
                    />
                ) : (<div />)}

            </div >
        );
    }
}


export default Index;